<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>卡列表</span>
      </div>
    </template>
    <el-row class="row-bg" justify="space-between">
      <el-col class="row-bg-search" :span="6">
        <el-input
          v-model="keywords"
          placeholder="请输入卡号/用户手机号"
          class="height40"
          style="width: 300px"
          clearable
          onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
          @change="changeData('keywords', keywords)"
        >
        </el-input>
        <el-button type="primary" class="height40" @click="searchListData"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="3">
        <el-button type="primary" class="height40" @click="exportData"
          >导出数据</el-button
        >
      </el-col>
    </el-row>
    <el-form :inline="true" :model="search" class="margintop">
      <el-form-item>
        <el-select
          v-model="status"
          placeholder="卡类型"
          clearable
          class="height40"
          @change="changeData('status', status)"
        >
          <el-option label="志愿卡" value="1" />
          <el-option label="升学卡" value="2" />
          <el-option label="体验卡" value="5" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <el-select v-model="region" placeholder="发行状态" clearable class="height40"
          @change="changeData('isActive', isActive)">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-select
          v-model="isActive"
          placeholder="激活状态"
          clearable
          class="height40"
          @change="changeData('isActive', isActive)"
        >
          <el-option label="未激活" value="0" />
          <el-option label="已激活" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="卡号区间">
        <!-- 输入框限制  onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"   只能输入正整数和0-->
        <el-input
          v-model="cardNostatr"
          @change="changeData('cardNostatr', cardNostatr)"
          style="margin-bottom: 10px; width: 150px"
          placeholder="开始卡号"
          clearable
          onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
        />
        <el-icon style="margin-bottom: 10px">
          <Minus />
        </el-icon>
        <el-input
          v-model="cardNoEnd"
          @change="changeData('cardNoEnd', cardNoEnd)"
          style="margin-bottom: 10px; width: 150px"
          placeholder="结束卡号"
          clearable
          onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
        />
      </el-form-item>
      <el-form-item label="发行时间">
        <el-date-picker
          v-model="addtime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="changeData('addtime', addtime)"
        />
      </el-form-item>
      <el-form-item label="激活时间">
        <el-date-picker
          v-model="bindtime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="changeData('bindtime', bindtime)"
        />
      </el-form-item>
      <el-form-item label="过期时间">
        <el-date-picker
          v-model="expiration"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="changeData('expiration', expiration)"
        />
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" class="margintop">
      <el-table-column width="15" />
      <el-table-column prop="type" label="卡类型">
        <template #default="scope">
          <div>
            {{
              scope.row.type == 1
                ? '志愿卡'
                : scope.row.type == 2
                  ? '升学卡'
                  : '体验卡'
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="member_id" label="卡号" />
      <el-table-column prop="" label="发行"> 已发行 </el-table-column>
      <el-table-column prop="addtime" label="发行时间" width="160" />
      <el-table-column prop="phone" label="绑定手机号" width="120" />
      <!-- <el-table-column prop="cardTypeName" label="绑定状态"> {{ item.phone ? item.phone: '未绑定' }}  </el-table-column> -->
      <el-table-column prop="bindStatus" label="绑定状态"> </el-table-column>
      <el-table-column prop="bindType" label="激活" />
      <el-table-column prop="bindtime" label="激活时间" width="160" />
      <el-table-column prop="expiretime" label="过期时间" />
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="scope">
          <el-icon
            size="22"
            style="cursor: pointer"
            @click="lookPassword(scope.row)"
            plain
          >
            <View class="look" />
          </el-icon>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      v-model:page="pageDate.page"
      v-model:limit="pageDate.pageSize"
      :total="pageTotal"
      :background="false"
      @pagination="paginationChange"
    ></pagination>
  </el-card>

  <!-- 看密码弹出框 -->
  <el-dialog v-model="centerDialogVisible" title="查看卡密" width="500" center>
    <div class="passwordDialog">
      <span> 卡号：{{ zhanghao }} </span>
      <br />
      <span> 卡密：{{ mima }} </span>
      <el-button class="copy" @click="copy">复制</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { formatDate } from '@/utils/index.js';
import Pagination from '@/components/Pagination/index.vue';
import { ElMessage } from 'element-plus';
import { couponExport, getCouponList } from '@/api/zyCard/zyCard.js';
// 使用useRoute()来获取路由信息
const route = useRoute();
// 获取传递的参数 卡号区间
const queryParams = route.query.data;

// 看密码弹出框
const centerDialogVisible = ref(false);
// 账号，密码
const zhanghao = ref('');
const mima = ref('');

// 发行时间
const addtime = ref('');
// 激活时间
const bindtime = ref('');
// 过期时间
const expiration = ref('');

// 卡号
const cardNostatr = ref('');
const cardNoEnd = ref('');

// 页码
const pageDate = ref({
  page: 1,
  pageSize: 10,
});
const pageTotal = ref(0);

// 搜索的内容
const keywords = ref('');
// 卡状态
const status = ref('');
// 激活状态
const isActive = ref('');

// 列表数据
const tableData = ref([]);

const search = ref({});
//
if (queryParams) {
  // 搜索条件
  search.cardNostatr = queryParams?.split('-')[0];
  search.cardNoEnd = queryParams?.split('-')[1];
  // 填入表单搜索框内
  cardNostatr.value = queryParams?.split('-')[0];
  cardNoEnd.value = queryParams?.split('-')[1];
}

// 获取卡列表
function getCardList() {
  const data = {
    keywords: search.keywords,
    page: pageDate.value.page,
    pageSize: pageDate.value.pageSize,
    status: search.status,
    isActive: search.isActive,
    cardNostatr: search.cardNostatr,
    cardNoEnd: search.cardNoEnd,
    issuingTimeStatr: search.issuingTimeStatr,
    issuingTimeEnd: search.issuingTimeEnd,
    activeTimeStatr: search.activeTimeStatr,
    activeTimeEnd: search.activeTimeEnd,
    expirationTimeStatr: search.expirationTimeStatr,
    expirationTimeEnd: search.expirationTimeEnd,
  };
  getCouponList(data).then((res) => {
    tableData.value = res.data.list;
    if (tableData.value.length > 0) {
      for (const i of tableData.value) {
        if (i.bindtime) {
          i.bindType = '已激活';
        } else {
          i.bindType = '未激活';
        }
        if (i.phone) {
          i.bindStatus = '已绑定';
        } else {
          i.bindStatus = '未绑定';
        }
      }
    }
    pageDate.value.page = res.data.page;
    pageTotal.value = res.data.pageTotal;
  });
}
getCardList();

// 点击搜索按钮
function searchListData() {
  getCardList();
}

// 统一获取所有搜索内容  赋值  转换格式
const changeData = (type, value) => {
  if (
    type ==
    ['keywords', 'status', 'isActive', 'cardNostatr', 'cardNoEnd'].filter(
      (item) => item == type
    )[0]
  ) {
    search[type] = value;
  } else if (type == 'addtime') {
    if (value) {
      search.issuingTimeStatr = formatDate(value[0]).split(' ')[0];
      search.issuingTimeEnd = formatDate(value[1]).split(' ')[0];
    } else {
      search.issuingTimeStatr = '';
      search.issuingTimeEnd = '';
    }
  } else if (type == 'bindtime') {
    if (value) {
      search.activeTimeStatr = formatDate(value[0]).split(' ')[0];
      search.activeTimeEnd = formatDate(value[1]).split(' ')[0];
    } else {
      search.activeTimeStatr = '';
      search.activeTimeEnd = '';
    }
  } else if (type == 'expiration') {
    if (value) {
      search.expirationTimeStatr = formatDate(value[0]).split(' ')[0];
      search.expirationTimeEnd = formatDate(value[1]).split(' ')[0];
    } else {
      search.expirationTimeStatr = '';
      search.expirationTimeEnd = '';
    }
  }
  getCardList();
};

// 分页
function paginationChange(val) {
  if (pageDate.page * pageDate.pageSize - pageTotal.value > pageDate.pageSize) {
    pageDate.page = 1;
  } else {
    pageDate.page = val.page;
    pageDate.pageSize = val.limit;
  }
  getCardList();
}

// 查看密码
const lookPassword = (item) => {
  centerDialogVisible.value = true;
  zhanghao.value = item.member_id;
  mima.value = item.password;
};

// 导出
function exportData() {
  const data = {
    keywords: search.keywords,
    page: pageDate.page,
    pageSize: pageDate.pageSize,
    status: search.status,
    isActive: search.isActive,
    cardNostatr: search.cardNostatr,
    cardNoEnd: search.cardNoEnd,
    issuingTimeStatr: search.issuingTimeStatr,
    issuingTimeEnd: search.issuingTimeEnd,
    activeTimeStatr: search.activeTimeStatr,
    activeTimeEnd: search.activeTimeEnd,
    expirationTimeStatr: search.expirationTimeStatr,
    expirationTimeEnd: search.expirationTimeEnd,
  };
  couponExport(data)
    .then((res) => {
      if (res.code == 20000) {
        window.location.href = res.data.url;
        ElMessage.success('导出成功');
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
}

// 复制
async function copy() {
  try {
    await navigator.clipboard.writeText(
      '卡号:' + zhanghao.value + '\n' + '卡密:' + mima.value
    );
    ElMessage.success('复制成功');
  } catch (error) {
    console.log('error:', error);
    ElMessage.error('复制成功');
  }
}
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.row-bg-search {
  display: flex;
  flex-direction: row;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
  }
}

.passwordDialog {
  display: flex;
  flex-direction: column;

  .copy {
    margin: 30px 0;
  }
}

.look:hover {
  color: #409eff;
}
</style>
